import React, {
    Component,
} from 'react'
import { connect } from 'react-redux';
import { View, Text, Image, StyleSheet, TouchableOpacity } from 'react-native'
import { NavigationHeader, PetItem, WhitePage } from '../../components';
import { ActionTypes } from '../../constants';
import { SafeAreaView } from 'react-navigation'
import { common } from '../../configs'
const ScrollableTabView = require('react-native-scrollable-tab-view')


class PersonalPage extends Component {

    static propTypes = {

    };

    // 生命周期
    constructor(props) {
        super(props)
        const { item } = props.navigation.state.params || {}
        const { id } = item
        this.state = {
            id: 1
        }
    }

    componentDidMount() {
        this._fetchPersonalPets()
    }

    // render part
    render() {
        console.log(this.props);
        
        const { item } = this.props.navigation.state.params || {}
        const {
            nick_name
        } = item;
        return (
            <SafeAreaView style={common.contain}>
                <NavigationHeader
                    title={nick_name}
                    rightButton={this._renderRightButton()}
                    navigation={this.props.navigation}
                />
                <View style={common.containView}>
                    {this._renderPetListView()}
                </View>
            </SafeAreaView>
        )
    }

    _renderRightButton(){
        return (
            <TouchableOpacity
                style={{ alignItems: 'flex-end' }}
                onPress={() => {
                    // 收藏这个人
                    const { isLogin } = this.props || {}
                    if (isLogin) {
                        // 点赞
                        this._fetchAddRelation()
                        return;
                    }
                    this.props.navigation.navigate('Login')
                }}
            >
                <Text>收藏</Text>
            </TouchableOpacity>
        )
    }

    _renderPetListView() {
        const { pets = [] } = this.props.petList || {}
        if (pets.length === 0) return <WhitePage />
        return (
            <ScrollableTabView
                tabBarUnderlineStyle={{
                    backgroundColor: '#fff'
                }}
                tabBarBackgroundColor='#6a88fc'
                tabBarTextStyle={{
                    color: '#fff'
                }}
            >

                {this.props.petList.pets.map((value, index) => {
                    console.log('value', value)
                    return <PetItem
                        tabLabel={value.name}
                        key={index}
                        item={value}
                        navigation={this.props.navigation}
                    />
                })}
            </ScrollableTabView>
        )
    }

    _fetchPersonalPets() {
        // 查询用户有的宠物
        const data = {
            uid: this.state.id
        }
        const callBack = this._loadSuccess.bind(this)
        actionUtil(ActionTypes.API_GET_PETS_BY_USER_ID, { data, callBack })
    }

    _fetchAddRelation() {
        console.log('_fetchAddRelation')
        const { item } = this.props.navigation.state.params || {}
        const {
            id
        } = item;
        const { id: relater } = this.props.user
        const data = {
            uid: id,
            rtype: 1, // 收藏
            relater: relater
        }
        const callBack = this._addRelateSuccess.bind(this)
        actionUtil(ActionTypes.API_RELATE_USER_BY_TYPE, { data, callBack })
    }

    _loadSuccess(response, error) {
        // load success
        console.log('test', response);
    }

    _addRelateSuccess(response, error) {
        if (error) {
            return;
        }

    }
}

const styles = StyleSheet.create({

})

export default connect(state => ({
    petList: state.pet.petList,
    user: state.user.user,
    isLogin: state.user.isLogin
})
)(PersonalPage)